import React, { Fragment, useMemo, useRef, useState } from "react";
import { Badge, Button, Popconfirm } from "antd";
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';

import SkProTable, { TableType, IProTableRef } from "vendor/components/pro-table-native";
import { helper } from "vendor/utils/T";
import { permission, EnumAuthKey, AuthCan } from "@/service/permission";
import { useThemeToken, getEnv } from "@/constants";

import { getDataAction, getFilterItems } from './proTableDriver';
import { CreateOrEditBtn } from './btn';
import { RespDataType, delDept } from '../api';

const List: React.FC = () => {
  const { themeToken } = useThemeToken();
  const proTableRef = useRef<IProTableRef>();
  const columns = useMemo(() => getColumns(proTableRef), [proTableRef]);
  const [isShow, setIsShow] = useState(false);

  return <SkProTable
    ref={proTableRef}
    dataAction={getDataAction(proTableRef, setIsShow)}
    rowKey={"deptId"}
    theme={themeToken.proTableToken}
    headerProps={{
      operatorProps: {
        btnList: [{
          authKey: EnumAuthKey.sysDept.addButton,
          ExtendComponent: () => <CreateOrEditBtn type="primary" size="middle" optType="add" icon={<PlusOutlined />} fetchList={() => proTableRef.current.doFetchList()}>
            添加
          </CreateOrEditBtn>
        }].filter((item) => permission.can(item.authKey)),
      },
      filterProps: {
        maxWidth: "45%",
        filterItems: getFilterItems(),
      }
    }}
    contentProps={{
      isShow,
      isShowRowSelection: false,
      tableProps: {
        columns,
        defaultExpandAllRows: true,
      }
    }}
    footerProps={{ isShow: false }}
    onError={(msg) => console.error(msg)}
  />
}

export default List;

const getColumns = (proTableRef: React.MutableRefObject<IProTableRef>) => {
  const { commonStatusList } = getEnv().globalConfig;
  const statusToInfo = helper.convertArrayToObj(commonStatusList);

  const columns: TableType.ColumnsType<RespDataType.DeptItem> = [
    {
      title: '组织名称',
      dataIndex: 'deptName',
      key: 'deptName',
      width: '30%',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: '5%',
      render: (value) => {
        const { label, color } = statusToInfo[value];
        return <Badge color={color} text={label}/>
      }
    },
    {
      title: '排序',
      dataIndex: 'orderNum',
      key: 'orderNum',
      width: '5%',
    },
    {
      title: "操作",
      width: '40%',
      render: (_, record) => <Fragment>
        <AuthCan authKey={EnumAuthKey.sysDept.addButton}>
          <CreateOrEditBtn deptId={record.deptId} size="small" optType="add" icon={<PlusOutlined />} style={{ marginRight: 5 }} fetchList={() => proTableRef.current.doFetchList()}>添加</CreateOrEditBtn>
        </AuthCan>
        <AuthCan authKey={EnumAuthKey.sysDept.editButton}>
          <CreateOrEditBtn deptId={record.deptId} size="small" optType="edit" editData={record} icon={<EditOutlined />} style={{ marginRight: 5 }} fetchList={() => proTableRef.current.doFetchList()}>编辑</CreateOrEditBtn>
        </AuthCan>

        <AuthCan authKey={EnumAuthKey.sysDept.removeButton}>
          <Popconfirm
            title="确定删除?"
            okText="确定"
            cancelText="取消"
            onConfirm={() => delDept(record.deptId).then(() => {
              proTableRef.current.doFetchList();
            }).catch((e) => console.log(e))}>
            <Button
              danger
              size="small"
              icon={<DeleteOutlined />}
              style={{ marginRight: 5 }}
            >
              删除
            </Button>
          </Popconfirm>
        </AuthCan>
      </Fragment>
    }
  ];

  return columns;
}
